<template>
  <div class="userCenter">
    <div class="list" ref="payway">
      <div class="item" v-for="reason in reasonlists" v-bind:key="reason.id">
        <div>
          <div class="item-primary">
            <span class="item-content">{{reason.desc}}</span>
          </div>
        </div>
        <div class="">
          <q-radio v-model="selectedReason" v-bind:val="reason.id"></q-radio>
        </div>
      </div>
    </div>

    <div class="buttons">
      <button class="custom">提交</button>
    </div>

  </div>
</template>
<script>
  export default({
    data () {
      return {
        'selectedReason': 1,
        'reasonlists': [
          {
            'id': 1,
            'desc': '我不想去了'
          },
          {
            'id': 2,
            'desc': '时间安排有冲突'
          },
          {
            'id': 3,
            'desc': '看错了，我想参加别的活动'
          },
          {
            'id': 4,
            'desc': '其他原因'
          }
        ]
      }
    },
    created () {

    },
    mounted () {
    },
    methods: {
      selectPayway (payway) {
        this.payway = payway
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .q-radio
    input
      &:checked + div:before, & + div:before
        border 1px solid #e5e5e5
      & + div:after
        -webkit-transform rotate(45deg)
        transform rotate(45deg)
        -webkit-transform-origin 100% 100%
        transform-origin 100% 100%
      &:checked + div:after
        background none
        top -2.333333px
        left -2px
        width 5.720000000000001px
        height 12.100000000000001px
        border-top none
        border-left none
        border-right 2px solid #cb934b
        border-bottom 2px solid #cb934b
        -webkit-transform rotate(45deg)
        transform rotate(45deg)
        border-radius 0
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "../userCenter/index.styl"
  .userCenter
    .list
      &:last-child .item
        border-bottom bordercolor
      .item
        margin-left -0.4rem
        margin-right -0.4rem
        padding: 0 0.4rem;
      .icon-selected
        background-position 0 -18.3rem
    .buttons
      padding-left cal(20) rem
      padding-right cal(20) rem
      button
        width 100%
        margin-top cal(30) rem
</style>
